<template>
  <div>
    <!--查询  -->
    <div class="parameter-head" ref="parameterheadRef">
      <slot></slot>
    </div>
    <!--     表格   -->
    <div class="parameter-table">
      <el-table ref="multipleTable"
        :data="parameter.tableData.list" border size="mini" :height="tableH"
        :highlight-current-row="parameter.tableData.highlightCurrentRow"
        @current-change="(currentRow,oldCurrentRow)=>parameter.tableData.singleSelectChange?parameter.tableData.singleSelectChange(currentRow,oldCurrentRow):''"
        @selection-change="(v)=>parameter.tableData.handleSelectionChange(v)"
        :show-summary="Boolean(parameter.tableData.getSummaries)"
        :summary-method="(p)=>parameter.tableData.getSummaries(p)"
        :span-method="parameter.tableData.spanMethod?parameter.tableData.spanMethod:spanMethod"
      >
        <el-table-column v-for="item in parameter.tableData.title"
                         :key="item.prop"
                         :prop="item.prop"
                         :sortable="Boolean(item.sortable)"
                         :type="item.type"
                         :selectable="parameter.tableData.selectable?parameter.tableData.selectable:selectable"
                         :label="item.label"
                         align="center"
                         :width="item.width" :min-width="item.minWidth"
                         :show-overflow-tooltip="item.showOverflowTooltip===undefined || item.showOverflowTooltip"
                         :fixed="item.fixed"
        >
          <template #default="scope" v-if="item.slot">
            <slot :name="item.prop" :row="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--     分页   -->
    <div ref="paginationRef"  >
      <el-pagination v-if="parameter.pagetion"
        v-model:current-page="parameter.pagetion.pageNo"
        v-model:page-size="parameter.pagetion.pageSize"
        :page-sizes="parameter.pagetion.pageCollection || [10, 20, 50, 100]"
        :small="true"
        layout="total, sizes, prev, pager, next, jumper"
          :total="parameter.pagetion.total"
        @size-change="parameter.pagetion.handleSizeChange()"
        @current-change="parameter.pagetion.handleCurrentChange()"
      />
<!--      <MenuPage :parameter="MenuPageParameter">-->
<!--        <template #options="{row}">-->
<!--          <el-button type="text" @click="edited(row)"-->
<!--          >修改</el-button>-->
<!--          <el-button type="text" @click="deleted(row)"-->
<!--          >删除</el-button>-->
<!--        </template>-->
<!--      </MenuPage>-->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    parameter: {
      type:Object,
      required: true,
      default: () => ({
        tableData: {
          reduceHeight:84,
          //highType 0:固定高度,1:自动高度(表内容决定高度),2:视口高度-reduceHeight
          highType: 2,
          highlightCurrentRow: true,   //单击选中行
          //内容
          list: [],
          //表头
          title: [
            { prop: 'provider', label: '承运商' },
            { prop: '', label: '联系人' },
            { prop: 'mobile', label: '手机号' },
            { prop: 'truck_no', label: '车牌号'  },
            { prop: 'type2', label: '类型' },
            { prop: '', label: '园区' },
            { prop: 'options', label: '园区', slot:true },
          ],
          singleSelectChange({currentRow,oldCurrentRow}){
            console.log(currentRow, oldCurrentRow);
          },
          handleSelectionChange(v){
            console.log(v);
          },
          getSummaries:(param)=>{
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = '合计';
              }else if(column.property==='quality_availabe_num'){
                sums[index] = this.total.sumAvailabe
              }else if(column.property==='quality_total_num'){
                sums[index] = this.total.sumQualityTota
              }else if(column.property==='total_num'){
                sums[index] = this.total.sumTotal
              }else if(column.property==='quality_used_num'){
                sums[index] = this.total.sumUsed
              }

            });
            return sums;
          }
        },
        pagetion: {
          pageCollection: [100,200,300,400],
          pageNo: 1,
          pageSize: 100,
          total: 1,
          handleSizeChange: (val) => {
            this.MenuPageParameter.pagetion.pageSize = val
            this.getList()
          },
          handleCurrentChange: (val) => {
            this.MenuPageParameter.pagetion.pageNo = val
            this.getList()
          },
        },
      })
    },
  },
  data() {
    return {
      tableH: 0,
    }
  },
  mounted() {
    this.$nextTick(()=>{
      console.log(this.parameter.pagetion);
      let headH = this.$refs.parameterheadRef.clientHeight
      let paginationH = this.parameter.pagetion ? this.$refs.paginationRef.clientHeight : 0
      //highType 0:固定高度,1:自动高度,2:视口高度-reduceHeight
      if(this.parameter.tableData.highType === 0){
        this.tableH = this.parameter.tableData.reduceHeight
      }else if(this.parameter.tableData.highType === 1){
        this.tableH = ''
      }else if(this.parameter.tableData.highType === 2){
        this.tableH = innerHeight - this.parameter.tableData.reduceHeight - headH - paginationH
      }
      console.log('表格动态高度',this.tableH,headH);
    })
  },
  methods:{
    spanMethod({ row, column, rowIndex, columnIndex }){
      return [1, 1];
    },
    selectable(row, index){
      return true
    },
    getList(){
      
    }
  }
}
</script>

<style scoped lang="scss">
</style>
